/* 使用更直观的盒模型 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

p {
  margin: 0px;
}

/* 根元素变量定义 */
:root {
  /* 字体栈 */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif !important;

  /* 颜色系统 */
  --color-gray-000: #000000;
  --color-gray-111: #111111;
  --color-gray-222: #222222;
  --color-gray-333: #333333;
  --color-gray-444: #444444;
  --color-gray-555: #555555;
  --color-gray-666: #666666;
  --color-gray-777: #777777;
  --color-gray-888: #888888;
  --color-gray-999: #999999;

  /* 主色调 */
  --primary-color: #4f65f9;
}

/* 通用背景 */
.commonBg {
  position: relative;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('@/assets/images/defaultLayoutContentBg.png') no-repeat center/cover;
    z-index: 0;
    pointer-events: none;
    height: 212px;
    width: 100%;
  }
}

/* 淡入淡出过渡 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}